import { Component, createRef } from 'react'

// 创建类组件(优势: hooks之前功能十分强大, 劣势: 写法复杂)
class Hello extends Component {
  // 提供组件状态
  state = {
    username: '',
    isSingDog: '',
  }

  inputRef = createRef()

  handleclick = (e) => {
    // 拿到input的value值, 你得先拿到input框 => ref
    // 3. 通过ref对象里面的current属性获取
    console.log(this.inputRef.current.value)
    this.inputRef.current.focus()
  }

  render() {
    // this=>组件实例
    return (
      <div>
        <h3>表单元素处理</h3>
        {/* 非受控组件的形式(通过ref获取dom组件) */}
        {/* 2. 绑定ref对象到目标dom */}
        <input type="text" ref={this.inputRef} />
        <button onClick={this.handleclick}>获取input的value</button>
      </div>
    )
  }
}

export default Hello
